<template>
  <h1>1.基本用法</h1>
  <h2>pearson--name:{{pearson.name}}  age---{{pearson.age}}  sex---{{pearson.sex}}  scroe---{{pearson.score}}  hobby---{{pearson.hobby}}</h2>
  <button @click="changePearson">改变pearson</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "About",
});
</script>

<script setup lang="ts">
  import { reactive } from "vue";
  interface PearsonType{
    name?:string,
    age?:number,
    sex?:string,
    score?:number,
    hobby?:string[]
  }
  const pearson = reactive<PearsonType>({
    name:'小明',
    age:18,
    sex:'男',
    hobby:['唱','跳']
  })
  const changePearson = () => {
    // pearson.name = '小王'
    // delete pearson.age
    // pearson.score = 90
   (pearson.hobby as string[])[0] = 'rap'
  }
</script>